<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小智服务器测试页面</title>
    <link rel="stylesheet" href="css/test_page.css">
    <script>
        // 检测是否使用file://协议打开
        if (window.location.protocol === 'file:') {
            document.addEventListener('DOMContentLoaded', function () {
                // 创建警告框
                const warningDiv = document.createElement('div');
                warningDiv.id = 'fileProtocolWarning';
                warningDiv.innerHTML = `
                    <h2>⚠️ 警告：请使用HTTP服务器打开此页面</h2>
                    <p>您当前使用的是本地文件方式打开页面（file://协议），这可能导致页面功能异常。</p>
                    <p>您可以使用nginx映射启动测试页面，也可以请按照以下步骤使用python启动测试http服务：</p>
                    <ol>
                        <li>打开命令行终端</li>
                        <li>命令行进入到 xiaozhi-server/test 目录</li>
                        <li>执行以下命令启动HTTP服务器：</li>
                    </ol>
                    <pre>python -m http.server 8006</pre>
                    <p>然后在浏览器中访问：<strong>http://localhost:8006/test_page.html</strong></p>
                `;
                document.body.appendChild(warningDiv);
            });
        }
    </script>
</head>

<body>
    <div class="container">
        <div id="scriptStatus" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            正在加载Opus库...
        </div>

        <!-- 两栏布局：设备配置和连接信息 -->
        <div class="two-column-layout">
            <!-- 设备配置面板 -->
            <div class="section">
                <h2>
                    设备配置
                    <button class="toggle-button" id="toggleConfig">编辑</button>
                </h2>
                <div class="config-panel" id="configPanel">
                    <div class="control-panel">
                        <div class="config-row">
                            <div class="config-item">
                                <label for="deviceMac">设备MAC:</label>
                                <input type="text" id="deviceMac" placeholder="device-id" disabled>
                            </div>
                            <div class="config-item">
                                <label for="deviceName">设备名称:</label>
                                <input type="text" id="deviceName" value="Web测试设备" placeholder="deviceName" disabled>
                            </div>
                        </div>
                        <div class="config-row">
                            <div class="config-item">
                                <label for="clientId">客户端ID:</label>
                                <input type="text" id="clientId" value="web_test_client" placeholder="client-id"
                                    disabled>
                            </div>
                            <div class="config-item">
                                <label for="token">认证令牌:</label>
                                <input type="text" id="token" value="your-token1" placeholder="token" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 连接信息面板 -->
            <div class="section">
                <h2>
                    连接信息
                    <span class="connection-status">
                        <span id="otaStatus" class="status">● OTA未连接</span>
                        <span id="connectionStatus" class="status">● WS未连接</span>
                    </span>
                    <button class="connect-button" id="connectButton">
                        <span>●</span>
                        连接
                    </button>
                </h2>
                <div class="connection-controls">
                    <input type="text" id="otaUrl" value="http://127.0.0.1:8002/xiaozhi/ota/"
                        placeholder="OTA服务器地址，如：http://127.0.0.1:8002/xiaozhi/ota/" />
                    <input type="text" id="serverUrl" value="" readonly disabled placeholder="点击连接按钮后，自动从OTA接口获取" />
                </div>
            </div>
        </div>

        <div class="section">
            <div class="tabs">
                <button class="tab active" data-tab="text">文本消息</button>
                <button class="tab" data-tab="voice">语音消息</button>
            </div>

            <div class="tab-content active" id="textTab">
                <div class="message-input">
                    <input type="text" id="messageInput" placeholder="输入消息..." disabled>
                    <button id="sendTextButton" disabled>发送</button>
                </div>
            </div>

            <div class="tab-content" id="voiceTab">
                <div class="audio-controls">
                    <button id="recordButton" class="record-button" disabled>开始录音</button>
                </div>
                <canvas id="audioVisualizer" class="audio-visualizer"></canvas>
            </div>

            <div style="margin: -10px 0px 5px 0px;">
                <span class="connection-status llm-emoji">
                    <span id="sessionStatus" class="status offline"><span class="emoji-large">😶</span> 小智离线中</span>
                </span>
            </div>
            <div class="flex-container">
                <div id="conversation" class="conversation"></div>
                <div id="logContainer">
                    <div class="log-entry log-info">准备就绪，请连接服务器开始测试...</div>
                </div>
            </div>
        </div>

        <!-- MCP 工具管理区域 -->
        <div class="section">
            <h2>
                MCP 工具管理
                <span class="connection-status">
                    <span id="mcpToolsCount">0 个工具</span>
                </span>
                <button class="toggle-button" id="toggleMcpTools">展开</button>
            </h2>
            <div class="config-panel" id="mcpToolsPanel">
                <div id="mcpToolsContainer" class="mcp-tools-container">
                    <!-- 工具列表将动态插入这里 -->
                </div>
                <div style="text-align: center; padding: 15px 0;">
                    <button class="btn" id="addMcpToolBtn" style="background-color: #4caf50;">
                        ➕ 添加新工具
                    </button>
                </div>
            </div>
        </div>

        <!-- MCP 工具编辑模态框 -->
        <div id="mcpToolModal"
            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; overflow-y: auto;">
            <div
                style="background-color: white; border-radius: 10px; padding: 25px; width: 90%; max-width: 700px; margin: 50px auto; max-height: 85vh; overflow-y: auto;">
                <div
                    style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0;">
                    <h2 id="mcpModalTitle" style="font-size: 20px; font-weight: bold; color: #333; margin: 0;">添加工具</h2>
                    <button id="closeMcpModalBtn"
                        style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px;">&times;</button>
                </div>

                <div id="mcpErrorContainer"></div>

                <form id="mcpToolForm">
                    <div style="margin-bottom: 20px;">
                        <label
                            style="display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;">工具名称
                            *</label>
                        <input type="text" id="mcpToolName" placeholder="例如: self.get_device_status" required
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;">
                    </div>

                    <div style="margin-bottom: 20px;">
                        <label
                            style="display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;">工具描述
                            *</label>
                        <textarea id="mcpToolDescription" placeholder="详细描述工具的功能和使用场景..." required
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; min-height: 80px; resize: vertical;"></textarea>
                    </div>

                    <div style="margin-bottom: 20px;">
                        <label
                            style="display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;">输入参数</label>
                        <div
                            style="background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 15px;">
                            <div id="mcpPropertiesContainer">
                                <div style="text-align: center; padding: 20px; color: #999; font-size: 14px;">
                                    暂无参数，点击下方按钮添加参数</div>
                            </div>
                            <button type="button" id="addMcpPropertyBtn"
                                style="width: 100%; margin-top: 10px; padding: 8px 15px; border: none; border-radius: 5px; background-color: #2196f3; color: white; cursor: pointer; font-size: 14px;">
                                ➕ 添加参数
                            </button>
                        </div>
                    </div>

                    <div style="margin-bottom: 20px;">
                        <label
                            style="display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;">
                            模拟返回结果 (JSON 格式，可选)
                            <span style="font-size: 12px; color: #999; font-weight: normal;">- 留空则返回默认成功消息</span>
                        </label>
                        <textarea id="mcpMockResponse" placeholder='{"success": true, "data": "执行成功"}'
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; font-family: 'Courier New', monospace; min-height: 100px; resize: vertical;"></textarea>
                        <div style="font-size: 12px; color: #666; margin-top: 4px;">
                            💡 提示：如果设置了模拟返回结果，工具调用时将返回这个 JSON 对象
                        </div>
                    </div>

                    <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 25px;">
                        <button type="button" id="cancelMcpBtn"
                            style="padding: 8px 15px; border: none; border-radius: 5px; background-color: #9e9e9e; color: white; cursor: pointer; font-size: 14px;">取消</button>
                        <button type="submit"
                            style="padding: 8px 15px; border: none; border-radius: 5px; background-color: #4caf50; color: white; cursor: pointer; font-size: 14px;">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Opus解码库 -->
    <script src="js/utils/libopus.js"></script>

    <!-- 主应用入口 -->
    <script type="module" src="js/app.js"></script>
</body>

</html>